<template>
  <div class="dorm">
    <van-nav-bar
      fixed
      border
      title="账单详情"
      left-arrow
      @click-left="goBack"
    />
    <div class="bill_title">
      <!-- <p class="ThreeTitle" v-if="billArr.park">
				{{billArr.park.pk_name}}
			</p> -->
      <p class="ThreeTitle" v-if="billArr.data_type == 'bill'">租赁账单</p>
      <p class="ThreeTitle" v-if="billArr.data_type == 'overdue'">滞纳金账单</p>
      <p class="ThreeTitle" v-if="billArr.data_type == 'margin'">保证金账单</p>
      <p :class="billArr.clearing_status > 1 ? 'Paid' : 'money'">
        ￥{{
          billArr.clearing_status > 1
            ? billArr.receivable_fee
            : billArr.residue_receivable_fee
        }}
      </p>
    </div>
    <div class="dorm_box">
      <div class="dorm_box_head">
        <p class="ThreeTitle">账单信息</p>
      </div>
      <div class="dorm_info">
        <div class="dorm_info_item">
          <p>
            <span class="Level">缴费状态：</span>
            <span class="text">{{
              billArr.clearing_status > 1 ? "已支付" : "未支付"
            }}</span>
          </p>
          <p>
            <span class="Level">应付总额：</span>
            <span class="text">{{ billArr.receivable_fee }}元</span>
          </p>
          <p>
            <span class="Level">已收金额：</span>
            <span class="text">{{ billArr.collection_amount }}元</span>
          </p>
          <p v-if="billArr.clearing_status > 1">
            <span class="Level">付款时间：</span>
            <span class="text">{{ billArr.clearing_time }}</span>
          </p>
          <p>
            <span class="Level">账单编号：</span>
            <span class="text">{{ billArr.sn }}</span>
          </p>
          <p>
            <span class="Level">收款对象：</span>
            <span class="text" v-if="billArr.contract">{{
              billArr.contract.customer_name
            }}</span>
          </p>

          <p>
            <span class="Level">计费期间：</span>
            <span class="text"
              >{{ billArr.start_date }} 至 {{ billArr.end_date }}</span
            >
          </p>
          <p>
            <span class="Level">应收日期：</span>
            <span class="text">{{ billArr.receivable_date }}</span>
          </p>
          <p>
            <span class="Level">租赁位置：</span>
            <span class="text" v-if="billArr.contract">{{
              billArr.contract.room
            }}</span>
          </p>
        </div>
      </div>
    </div>

    <div class="dorm_box cost">
      <div class="dorm_box_head">
        <p class="ThreeTitle">费用详情</p>
      </div>
      <div class="dorm_info">
        <div class="dorm_info_item">
          <p>
            <span class="Level">租金：</span>
            <span class="text">{{ billArr.rent_tax }}元</span>
          </p>
          <p>
            <span class="Level">物业管理费及其他：</span>
            <span class="text">{{ billArr.other_amount }}元</span>
          </p>
          <p>
            <span class="Level">基本电费：</span>
            <span class="text">{{ billArr.basic_electricity_tax }}元</span>
          </p>

          <p class="df">
            <span class="Level">电量电费：</span>
            <span class="text">{{ billArr.electricity_tax }}元</span>
          </p>
          <!-- <div class="Price">
						<span class="Price_frist">单价：</span>
						<span class="text">1.5元/度</span>
					</div> -->
          <div class="reading">
            <span class="Price_frist">读数：</span>
            <span class="text"
              >{{ billArr.electric_last_kwh }}~{{
                billArr.electric_this_kwh
              }}</span
            >
          </div>
          <p class="df">
            <span class="Level">水费：</span>
            <span class="text">{{ billArr.water_fee_tax }}元</span>
          </p>
          <!-- <div class="Price">
						<span class="Price_frist">单价：</span>
						<span class="text">7元/吨</span>
					</div> -->
          <div class="reading">
            <span class="Price_frist">读数：</span>
            <span class="text"
              >{{ billArr.water_last_kwh }}~{{ billArr.water_this_kwh }}</span
            >
          </div>
          <!-- <p>
						<span class="Level ">滞纳金：</span>
						<span class="text">0.00元</span>
					</p> -->
          <p>
            <span class="Level">用电服务费：</span>
            <span class="text">{{ billArr.electricity_server_fee_tax }}元</span>
          </p>
          <p>
            <span class="Level">用水服务费：</span>
            <span class="text">{{ billArr.water_server_fee_tax }}元</span>
          </p>
          <p v-for="(items, p) in billArr.facility_billings" :key="p">
            <span class="Level">{{ items.type }}：</span>
            <span class="text">{{ items.amount_tax }}元</span>
          </p>
        </div>
      </div>
    </div>

    <div class="bill_footer">
      <p class="tisp" v-if="billArr.clearing_status <= 1">
        提示：请于{{ billArr.receivable_date }}之前缴清费用，以免产生滞纳金
      </p>
      <div class="btn" v-if="billArr.clearing_status <= 1">
        <p class="generation" @click="clickBehalf">找人代付</p>
        <!-- <p class="pay" @click="pay">立即支付</p> -->
      </div>
      <van-button block v-else @click="goBack" color="#999">返回</van-button>
    </div>

    <div class="bg" v-if="isShow" @click="clickShow">
      <div class="share"></div>
    </div>
  </div>
</template>

<script>
import { NavBar, Button } from "vant";
import { setShare } from "@/wechat";
import { wechatBillRead, wechatPay } from "@/api/index";
import { PAGE_BASE_URL } from "@/config";
import wx from "weixin-js-sdk";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
  },
  data() {
    return {
      isShow: false,
      billArr: [],
      id: null,
      type: null,
    };
  },
  async mounted() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.getBill();
    const desc = `有一笔账单需要你帮我付款~`;
    const link = JSON.stringify(
      PAGE_BASE_URL + "/?#/bill?id=" + this.id + "&type=bill"
    );
    setTimeout(() => {
      setShare({
        desc,
        link,
      });
    }, 1000);
  },
  methods: {
    async getBill() {
      this.billArr = await wechatBillRead({
        id: this.id,
        type: this.type,
      });
    },
    goBack() {
      if (window.history.length <= 3 || window.history == "") {
        this.$router.replace("/");
      } else {
        this.$router.back();
      }
    },
    clickBehalf() {
      if (this.billArr.clearing_status < 2) {
        this.isShow = true;
        document.body.style.overflow = "hidden";
      }
    },
    clickShow() {
      this.isShow = false;
      document.body.style.overflow = "auto";
    },
    async pay() {
      if (this.billArr.clearing_status < 2) {
        const ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          try {
            let than = this;
            const wxData = await wechatPay({
              id: this.id,
              type: this.type,
            });
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                appId: wxData.appId,
                timeStamp: wxData.timeStamp,
                nonceStr: wxData.nonceStr,
                package: wxData.package,
                signType: wxData.signType,
                paySign: wxData.paySign,
                payOrderId: wxData.payOrderId,
              },
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  than.$dialog
                    .alert({
                      title: "温馨提示",
                      message: "支付成功",
                    })
                    .then(() => {
                      than.getBill();
                    });
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                  than.getBill();
                } else {
                  than.$dialog
                    .alert({
                      title: "温馨提示",
                      message: "支付失败",
                    })
                    .then(() => {
                      than.getBill();
                    });
                }
              }
            );
          } catch (e) {
            this.$dialog.alert({
              title: "错误提示",
              message: e.message,
            });
          }
        } else {
          this.$dialog.alert({
            title: "温馨提示",
            message: "请用手机进入平台支付",
          });
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}
.share {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: url(../../public/img/share.png) no-repeat;
  background-size: contain;
  background-origin: content-box;
  background-position-y: 20px;
  background-position-x: 12px;
}
.van-button {
  border-radius: 10px;
  width: 93%;
  margin: 0 auto;
}
.dorm {
  // padding-bottom:30px;
  margin-top: 42px;
}
.dorm_box {
  width: 100%;
  // height:293px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
  // border-radius:10px;
  margin: 10px auto 0;
  padding-bottom: 10px;
  .dorm_box_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    .ThreeTitle {
      font-weight: bold;
      padding: 16px 0;
    }
  }
  .dorm_info {
    border-top: 1px solid #f1f1f1;
    .dorm_info_item {
      margin: 18px auto;
      padding: 0px 13px;
      p {
        margin: 15px auto;
      }
    }
  }
}
.money {
  font-size: 25px;
  font-weight: 400;
  color: rgba(232, 23, 23, 1);
}
.Paid {
  font-size: 25px;
  font-weight: 400;
  color: #999;
}
.bill_title {
  // margin:42px auto 0;
  text-align: center;
  background-color: #fff;
  padding: 20px 0;
  .ThreeTitle {
    font-size: 13px;
    font-weight: bold;
    color: rgba(56, 66, 75, 1);
  }
  .money {
    margin-top: 10px;
  }
  .Paid {
    margin-top: 10px;
  }
}
.cost .text {
  float: right;
}
.Price .Price_frist,
.reading .Price_frist {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.Price .text,
.reading .text {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.df {
  margin-bottom: 5px !important;
}
.bill_footer {
  background-color: #fff;
  margin: 10px auto;
  padding-bottom: 20px;
  padding-top: 15px;
  .tisp {
    margin: 0 15px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    padding: 16px 0;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 15px;
    .generation {
      width: 134px;
      height: 41px;
      line-height: 41px;
      background: rgba(137, 163, 200, 1);
      border-radius: 10px;
      text-align: center;
      color: #fff;
      font-size: 15px;
    }
    .pay {
      width: 203px;
      height: 41px;
      line-height: 41px;
      background: rgba(19, 117, 255, 1);
      border-radius: 10px;
      text-align: center;
      color: #fff;
      font-size: 15px;
    }
  }
}
@media (min-width: 750px) {
  .bg {
    width: 100%;
    height: 150%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .share {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url(../../public/img/share.png) no-repeat;
    background-size: contain;
    background-origin: content-box;
    background-position-y: 20px;
    background-position-x: 12px;
  }
  .van-button {
    border-radius: 10px;
    width: 93%;
    margin: 0 auto;
  }
  .dorm {
    // padding-bottom:30px;
    margin-top: 42px;
  }
  .dorm_box {
    width: 100%;
    // height:293px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 15px 33px 0px rgba(138, 149, 158, 0.1);
    // border-radius:10px;
    margin: 10px auto 0;
    padding-bottom: 10px;
    .dorm_box_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      .ThreeTitle {
        font-weight: bold;
        padding: 16px 0;
      }
    }
    .dorm_info {
      border-top: 1px solid #f1f1f1;
      .dorm_info_item {
        margin: 18px auto;
        padding: 0px 13px;
        p {
          margin: 15px auto;
        }
      }
    }
  }
  .money {
    font-size: 25px;
    font-weight: 400;
    color: rgba(232, 23, 23, 1);
  }
  .bill_title {
    margin: 46px auto 0;
    text-align: center;
    background-color: #fff;
    padding: 20px 0;
    .ThreeTitle {
      font-size: 13px;
      font-weight: bold;
      color: rgba(56, 66, 75, 1);
    }
    .money {
      margin-top: 10px;
    }
    .Paid {
      margin-top: 10px;
    }
  }
  .cost .text {
    float: right;
  }
  .Price .Price_frist,
  .reading .Price_frist {
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .Price .text,
  .reading .text {
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .df {
    margin-bottom: 5px !important;
  }
  .bill_footer {
    background-color: #fff;
    margin: 10px auto;
    padding-bottom: 20px;
    padding-top: 15px;
    .tisp {
      margin: 0 15px;
      font-size: 13px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      padding: 16px 0;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 15px;
      .generation {
        width: 134px;
        height: 41px;
        line-height: 41px;
        background: rgba(137, 163, 200, 1);
        border-radius: 10px;
        text-align: center;
        color: #fff;
        font-size: 15px;
      }
      .pay {
        width: 203px;
        height: 41px;
        line-height: 41px;
        background: rgba(19, 117, 255, 1);
        border-radius: 10px;
        text-align: center;
        color: #fff;
        font-size: 15px;
      }
    }
  }
}
</style>
